import React from 'react';
import PropTypes from 'prop-types';
import List, {ListItem, ListItemIcon, ListItemText} from 'material-ui/List';
import IconInbox from 'material-ui-icons/Inbox';


export default class Sidemenu extends React.Component {
  static propTypes = {
    menus: PropTypes.array.isRequired,
    onItemClick: PropTypes.func
  };

  static contextTypes = {
    router: PropTypes.object
  };

  handleItemClick = (url) => {
    if (this.context.router.history.location.pathname !== url) {
      setTimeout(() => {
        this.context.router.history.push(url);
      }, 100);
    }
    this.props.onItemClick && this.props.onItemClick(url);
  };

  renderItems () {
    return this.props.menus.map((menu, index) => {
      return <ListItem
        button
        key={index}
        value={menu.id}
        className="menu-item"
        onTouchTap={() => this.handleItemClick(menu.url)}
      >
        <ListItemIcon>
          <IconInbox />
        </ListItemIcon>
        <ListItemText primary={menu.name} />
      </ListItem>
    });
  };

  render() {

    console.log(`render <${this.constructor.name}>`);

    return (
      <List>
        {this.renderItems()}
      </List>
    )
  }

}
